// page_other/shuju/shuju.js
let app = getApp()
let yuming = app.globalData.yuming
import * as echarts from '../../pages/components/ec-canvass/echarts';
let chart = null;
const request = require('../../config/request');
//获取像素比
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}
// console.log(pixelRatio)
let dpr = getPixelRatio();

Page({

  /**
   * 页面的初始数据
   */
  ...request,
  data: {
    yuming: yuming,
    heights: "",
    title: '经营数据',
    day_payPrice: '',
    day_scanlog: '',
    payPrice: '',
    with_scanlog: '',
    with_yesterday: '',
    ec: {
      lazyLoad: true
    },
    ecs: {
      lazyLoad: true
    },
    bng: {
      lazyLoad: true
    },
  },
  getData() {
    this.myRequest(yuming + 'shop/shop_operating_data', {
      shopId: wx.getStorageSync('shopId')
    }, 'POST').then(res => {
      if (res.data.code == 200) {
        this.setData({
          day_payPrice: res.data.day_payPrice,
          day_scanlog: res.data.day_scanlog,
          payPrice: res.data.payPrice,
          with_scanlog: res.data.with_scanlog,
          with_yesterday: res.data.with_yesterday
        })
      }
    })
  },
  getpayInfo() {
    wx.showLoading({
      title: '加载中',
    })
    this.myRequest(yuming + 'shop/shop_pay_total_chartA', {
      shopId: wx.getStorageSync('shopId')
    }, "POST").then(res => {
      if (res.data.code == 200) {
        wx.hideLoading();
        let Atime = [];
        let Apaytimes = [];
        let Aprice = [];
        res.data.data.result.reverse().forEach(item => {
          Atime.push(item.pay_day);
          Apaytimes.push(item.scan_num);
          Aprice.push(item.pay_num);
        })
        // Atime = Atime.reverse();
        // Apaytimes = Apaytimes.reverse();
        // Aprice = Aprice.reverse();
        this.setData({
          Atime,
          Apaytimes,
          Aprice
        })
        this.oneComponent.init((canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // 加上这一行即可解决模糊问题
          });
          let option = {
            legend: {
              data: ['支付次数', '支付金额']
            },
            grid: {
              left: '3%',
              // right: '2%',
              bottom: '3%',
              containLabel: true
            },
            //当你选中数据时的提示框
            tooltip: {
              show: true,
              trigger: 'axis'
            },
            //	x轴
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.data.Atime,
              // x轴的字体样式
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#989898',
                  fontSize: '14',
                },
                interval: 0,
              },
              // 控制网格线是否显示
              splitLine: {
                show: false,
                //  改变轴线颜色
                lineStyle: {
                  // 使用深浅的间隔色
                  color: ['#aaaaaa']
                }
              },
              // x轴的颜色和宽度
              axisLine: {
                lineStyle: {
                  color: '#989898',
                  width: 1, //这里是坐标轴的宽度,可以去掉
                }
              }
              // show: false //是否显示坐标
            },
            yAxis: {
              x: 'center',
              type: 'value',
              // x轴的字体样式
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#989898',
                  fontSize: '14',
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#989898',
                  width: 1, //这里是坐标轴的宽度,可以去掉
                }
              },
              //网格线
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              },
              // show: false
            },
            series: [{
                name: '支付次数',
                type: 'line',
                smooth: true,
                itemStyle: {
                  color: "#ffa418"
                },
                data: this.data.Apaytimes
              },
              {
                name: '支付金额',
                type: 'line',
                smooth: true,
                itemStyle: {
                  color: "#1bae18"
                },
                data: this.data.Aprice
              }
            ]
          }
          this.setOption(chart, option);
          //this.chart = chart;
          return chart;
        });
      }
    })
  },
  gettsInfo() {
    wx.showLoading({
      title: '加载中',
    })
    this.myRequest(yuming + 'shop/shop_class_options', {
      shopId: wx.getStorageSync('shopId')
    }, "POST").then(res => {
      if (res.data.code == 200) {
        wx.hideLoading();
        let tsxx = [];
        res.data.data.forEach(item => {
          tsxx.push({
            value: item.option_total,
            name: item.name
          });
        })
        this.setData({
          tsxx
        })
        this.twoComponent.init((canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // 加上这一行即可解决模糊问题
          });
          let option = {
            tooltip: {
              trigger: 'item',
              position: 'top'

            },
            legend: {
              orient: 'horizontal',


            },
            series: [{
              roseType: 'area',
              type: 'pie',
              radius: '55%',
              center: ["49%", "60%"],
              data: this.data.tsxx,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              itemStyle: {

                normal: {
                  borderWidth: 2,
                  borderColor: '#FFF',
                  labelLine: {
                    length: -12,
                  },
                  color: function (colors) {
                    var colorList = [
                      '#3aa1fe',
                      '#37cbcb',
                      '#4fcb73',
                      '#fbd437',
                      '#f3637c',
                      '#a97be8',
                    ];
                    return colorList[colors.dataIndex];
                  }
                },
              }
            }]
          }
          this.setOption(chart, option);
          //this.chart = chart;
          return chart;
        });
      }
    })
  },
  getplInfo() {
    wx.showLoading({
      title: '加载中',
    })
    this.myRequest(yuming + 'hallfood/user_shop_lable', {
      shopId: wx.getStorageSync('shopId')
    }, "POST").then(res => {
      if (res.data.code == 200) {
        wx.hideLoading();
        console.log(res.data.data);
        let plsj = [];
        let pl = Object.entries(res.data.data)
        pl.forEach(item => {
          if (item[0] == 'count_very_nice') {
            plsj.push({
              value: item[1],
              name: '非常好'
            })
          }
          if (item[0] == 'count_good') {
            plsj.push({
              value: item[1],
              name: '好评'
            })
          }
          if (item[0] == 'count_yiban') {
            plsj.push({
              value: item[1],
              name: '一般'
            })
          }
          if (item[0] == 'count_cha') {
            plsj.push({
              value: item[1],
              name: '差评'
            })
          }
          if (item[0] == 'count_very_cha') {
            plsj.push({
              value: item[1],
              name: '非常差'
            })
          }
          if (item[0] == 'count_pic') {
            plsj.push({
              value: item[1],
              name: '有图评论'
            })
          }
        })
        this.setData({
          plsj
        })
        this.threeComponent.init((canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // 加上这一行即可解决模糊问题
          });
          let option = {
            tooltip: {
              trigger: 'item',
              position: 'top'

            },
            legend: {
              orient: 'horizontal',


            },
            series: [{

              type: 'pie',
              radius: '50%',
              center: ["50%", "60%"],
              data: this.data.plsj,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              itemStyle: {
                normal: {
                  labelLine: {
                    length: -4,
                  },
                  color: function (colors) {
                    var colorList = [
                      '#17eecc',
                      '#ea6d5b',
                      '#f6c022',
                      '#647798',
                      '#333',
                      '#3aa1fe'
                    ];
                    return colorList[colors.dataIndex];
                  }
                },
              }
            }]
          };
          this.setOption(chart, option);
          //this.chart = chart;
          return chart;
        });
      }
    })
  },
  setOption: function (chart, option) {
    var option = option;
    chart.setOption(option);
  },
  zyye() {
    wx.navigateTo({
      url: '/page_other/shujuyye/shujuyye',
    })
  },
  smcs() {
    wx.navigateTo({
      url: '/page_other/saomnum/saomnum',
    })
  },
  backs() {
    wx.navigateBack({
      delta: 0
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      heights: wx.getMenuButtonBoundingClientRect().top + 5,
      stryId: wx.getStorageSync('stryId')
    })
    this.oneComponent = this.selectComponent('#mychart-dom-bar0');
    this.twoComponent = this.selectComponent('#mychart-dom-bar1');
    this.threeComponent = this.selectComponent('#mychart-dom-bar2');
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getData();
    this.getpayInfo();
    this.gettsInfo();
    this.getplInfo();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
})